<template>
	<view class="order-index">
		<view class='header'>
			<view class='picTxt'>
				<view class='text'>
					<view class='name'>订单信息</view>
					<!-- <view>消费订单：0总消费：￥0</view> -->
				</view>
				<view class='pictrue'>
					<image src='@/static/order/orderTime.png'></image>
				</view>
			</view>
		</view>
		<view class="lst">
			<block v-for="(item,index) in lst" :key="index">
				<view class="item" @tap="itemClick(index,item.index)" :class="lstIndexCurrent==index?'check-item':''">
					<view class="txt">{{item.name}}</view>
					<view class="nums">{{item.nums}}</view>
				</view>
			</block>
		</view>
		<view class="lst-items" v-if="orderData.length>0">
			<block v-for="(item,index) in orderData" :key="index">
				<view class="item" style="margin-bottom: 20rpx;padding:0  16rpx;">
					<view class="hint-option center">
						
						<view class="time">取货码:{{item.days_number}}</view>
						<view class="time">{{timeFun(item.creation_time)}}</view>
						<view class="state">{{stateTxt(item.status)}}</view>
					</view>
					<view class="detail-option" @tap="distributionInfoClick(item)">
						<block v-for="(shopItem,shopIndex) in item.commodityData" :key="shopIndex">
							<view class="shop-item">
								<view class="item-img">
									<image :src="shopItem.main_img" class="auto-img img-radius"></image>
								</view>
								<view class="item-info">
									<view class="title">{{shopItem.commodity_title}}</view>
									<view class="price center">
										<span>¥</span>{{shopItem.commodity_price/100}}
									</view>
								</view>
								<view class="count">X{{shopItem.count}}</view>
							</view>
						</block>
					</view>
					<view class="hint-price">共{{item.commodity_count}}件商品,总金额<span>¥{{item.order_amount/100}}</span>
					</view>
					<view class="btn-option">
						<view class="btn cancel" v-if="item.status==0" @click="setCloseOrder(item.orderNumber)">关闭订单
						</view>
						<view class="btn pay" v-if="item.status==0" @click="openPay(item)">立即支付</view>
						<!-- 	<view class="btn cancel" v-if="item.status==1||item.status==2"
							@click="setCancelOrder(item.orderNumber)">取消订单</view> -->
						<template v-if="item.status==3">
							<view class="btn pay" @click="newEvaluate(item)">去评价</view>
						</template>
					</view>
				</view>
			</block>
		</view>
		<template v-if="orderData.length==0">
			<view class="no-emty" style="font-size: 26rpx;color: #999;">暂无相关订单</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lstIndexCurrent: 0,
				page: 0,
				lst: [{
						name: '全部',
						nums: '0',
						index: -1,
					},
					{
						name: '待付款',
						nums: '0',
						index: 0,
					},
					{
						name: '待配送',
						nums: '0',
						index: 1,
					},
					{
						name: '配送中',
						nums: '0',
						index: 2,
					},
					{
						name: '待评价',
						nums: '0',
						index: 3,
					},
				],
				status: -1, //查询全部
				orderData: [],
			}
		},
		computed: {
			stateTxt() {
				return item => {
					if (item == 0) {
						return '待付款'
					}
					if (item == 1) {
						return '待配送'
					}
					if (item == 2) {
						return '配送中'
					}
					if (item == 3) {
						return '待评价'
					}
					if (item == 5) {
						return '交易已关闭'
					}
				}
			},
			timeFun() {
				return time => {
					return this.getDate(time)
				}
			}
		},
		onReachBottom() {
			this.$http('order.queryStatusOrder', {
				token: this.$tools.getToken(),
				page: this.orderData.length,
				status: this.status
			}).then(res => {
				if (res.code == 200) {
					var orderData = res.data.orderBasic;
					var orderCommodityData = res.data.orderCommodity;
					if (orderData.length > 0) {
						for (let var1 in orderData) {
							var commodityData = [];
							for (let var2 in orderCommodityData) {
								if (orderCommodityData[var2].order_id == orderData[var1].id) {
									commodityData.push(orderCommodityData[var2])
								}
							}
							orderData[var1].commodityData = commodityData;
							this.orderData.push(orderData[var1])
						}
					} 
				} else {
					// console.log('进来了500', this.orderData)
				}
			})
		},
		onShow() {
			this.getList()
			this.getStatusOrderCount()
		},
		onLoad(e){
				console.log('e',e)
			this.lstIndexCurrent=e.tabIndex||0
		},
		methods: {
			itemClick(index, status) {
				this.lstIndexCurrent = index
				this.status = status
				uni.showLoading({
					title: '请稍等',
					mask: true
				})
				this.getList()
				this.getStatusOrderCount()
			},
			pageClick(url) {
				uni.navigateTo({
					url
				})
			},
			// shopItemClick(shopItem, item) {
			// 	if (this.lstIndexCurrent == 3) {
			// 		uni.setStorageSync('distributionInfo', item)
			// 		uni.navigateTo({
			// 			url: '/pages/order/order?id=' + item.horseman_id
			// 		})
			// 	} else {
			// 		uni.navigateTo({
			// 			url: '/pages/shopDetail/shopDetail?goodsId=' + shopItem.commodity_id
			// 		})
			// 	}

			// },
			/**
			 * @param {Object} item 配送详情信息
			 */
			distributionInfoClick(item) {
				uni.setStorageSync('distributionInfo', item)

				if (this.lstIndexCurrent == 3) {
					uni.navigateTo({
						url: '/pages/order/order?id=' + item.horseman_id
					})
				} else {
					uni.navigateTo({
						url: '/pages/order/orderDetails'
					})
				}
			},
			getStatusOrderCount() {
				this.$http('order.getStatusOrderCount', {
					token: this.$tools.getToken(),
				}).then(res => {
					if (res.code == 200) {
						let status0 = res.data.status0
						let status1 = res.data.status1
						let status2 = res.data.status2
						let status3 = res.data.status3
						let allNum = status0 + status1 + status2 + status3
						this.lst[0].nums = allNum
						this.lst[1].nums = status0
						this.lst[2].nums = status1
						this.lst[3].nums = status2
						this.lst[4].nums = status3
					}
				})
			},
			//关闭订单
			setCloseOrder(orderNumber) {
				var th = this;
				uni.showModal({
					title: '提示',
					content: '你确定关闭订单？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍等',
								mask: true
							})
							th.$http('order.setCloseOrder', {
								token: th.$tools.getToken(),
								orderNumber: orderNumber
							}).then(res => {
								th.$tools.showMsg(res.msg)
								th.getList()
								th.getStatusOrderCount()
							})
						} else if (res.cancel) {

						}
					}
				});
			},
			//取消订单
			setCancelOrder(orderNumber) {
				var th = this;
				uni.showModal({
					title: '提示',
					content: '你确定取消订单？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍等',
								mask: true
							})
							th.$http('order.setCancelOrder', {
								token: th.$tools.getToken(),
								orderNumber: orderNumber
							}).then(res => {
								th.$tools.showMsg(res.msg)
								th.getList()
								th.getStatusOrderCount()
							})
						} else if (res.cancel) {}
					}
				});
			},
			//评价
			newEvaluate(data) {
				uni.setStorageSync("orderData", data); //存储订单信息
				uni.navigateTo({
					url: "/pages/newEvaluate/newEvaluate"
				})
			},
			getList() {
				this.orderData = []
				this.$http('order.queryStatusOrder', {
					token: this.$tools.getToken(),
					page: 0,
					status: this.status
				}).then(res => {
					if (res.code == 200) {
						var orderData = res.data.orderBasic;
						var orderCommodityData = res.data.orderCommodity;
						for (let var1 in orderData) {
							var commodityData = [];
							for (let var2 in orderCommodityData) {
								if (orderCommodityData[var2].order_id == orderData[var1].id) {
									commodityData.push(orderCommodityData[var2])
								}
							}
							orderData[var1].commodityData = commodityData;
							this.orderData.push(orderData[var1])
						}
					} else {
						// console.log('进来了500', this.orderData)
					}
				})
			},
			openPay(item) {
				let th = this
				uni.showLoading({
					title: '请稍等',
					mask: true
				})
				this.$http('order.wxPay', {
					token: this.$tools.getToken(),
					orderNumber: item.orderNumber
				}).then(res => {
					if (res.code == 200) {
						var AtimeStamp = res.data.timeStamp;
						var AnonceStr = res.data.nonceStr;
						var Apackage = res.data.package;
						var ApaySign = res.data.paySign;
						wx.requestPayment({
							'timeStamp': AtimeStamp,
							'nonceStr': AnonceStr,
							'package': Apackage,
							'signType': 'MD5',
							'paySign': ApaySign,
							'success': function(res) {
								uni.showToast({
									title: '支付成功',
									icon: "none"
								})
							},
							'fail': function(res) {
								uni.showToast({
									title: '取消支付',
									icon: "none"
								})

							},
							'complete': function(res) {
								th.getList()
								th.getStatusOrderCount()
							}
						})
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.order-index {
		padding-bottom: 50rpx;
	}

	.header {
		height: 260rpx;
		padding: 0 30rpx;
		background: #e93323;

	}

	.picTxt {
		height: 190rpx;
		display: flex;
		align-items: center;
	}

	.text {
		flex: auto;
		color: rgba(255, 255, 255, 0.8);
		font-size: 26rpx;
	}

	.name {
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 20rpx;
	}

	.pictrue {
		flex: none;
		width: 122rpx;
		height: 109rpx;
	}

	.pictrue image {
		width: 100%;
		height: 100%;
	}

	.lst {
		margin-right: 32rpx;
		margin-left: 32rpx;
		margin-top: -100rpx;
		border-radius: 8rpx;
		background: #fff;
		padding: 24rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		font-size: 28rpx;
		color: #282828;


		.item {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.txt {}

			.nums {
				margin-top: 24rpx;
			}
		}

		.check-item {
			font-weight: bold;
		}

	}

	.lst-items {
		margin-right: 32rpx;
		margin-left: 32rpx;
		margin-top: 24rpx;
		border-radius: 8rpx;
		background: #fff;

		.hint-option {
			padding: 24rpx 0;
			font-size: 28rpx;

			.time {
				flex: auto;
				color: rgba(27, 25, 25, 1);
			}

			.state {
				flex: none;
				color: rgba(203, 60, 40, 1);
			}
		}

		.detail {
			padding: 24rpx 0;
			border-bottom: 2rpx solid #F5F5FF5;

		}

		.hint-price {
			margin-top: 24rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			span {
				color: rgba(203, 60, 40, 1);
			}
		}

		.btn-option {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 26rpx;
			padding: 24rpx 0;

			.btn {
				margin-left: 18rpx;
				width: 176rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 728rpx;
			}

			.cancel {
				height: 59rpx;
				width: 175rpx;
				color: #aaa;
				border: 1rpx solid #aaa;
			}

			.pay {
				color: #fff;
				background: rgba(203, 60, 40, 1);
			}
		}
	}

	.shop-item {
		margin-top: 32rpx;
		display: flex;
		align-items: flex-start;

		.item-img {
			flex: none;
			border-radius: 8rpx;
			width: 140rpx;
			height: 140rpx;
		}

		.item-info {
			flex: auto;
			margin-left: 20rpx;

			.title {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(27, 25, 25, 1);
				line-height: 1.5em;
			}

			.price {
				color: rgba(199, 44, 30, 1);
				font-size: 32rpx;
				font-weight: 700;
				margin-top: 12rpx;

				span {
					font-size: 22rpx;
				}
			}
		}

		.count {
			padding-left: 90rpx;
			flex: none;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}
	}

	.no-emty {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
		background: #f5f5f5;
	}
</style>
